<template>
  <div class="basic-wrap">
    <div class="button-wrap">
      <a-space>
        <a-button type="primary" @click="handleAdd">新增</a-button>
      </a-space>
      <div class="right-button-wrap">
        <a-input v-model:value="keyword" placeholder="关键词查询" style="width:160px;margin-right:8px">
          <template #prefix>
            <SearchOutlined style="color:#666"/>
          </template>
        </a-input>
        <a-button type="primary"  @click="reload">查询</a-button>
      </div>
    </div>
    <div class="table-wrap">
      <a-table :loading="loading" size="middle" :dataSource="dataSource" :columns="columns"
               :pagination="pagination" @change="pageChange">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'operation'">
            <a-button class="button-interval" type="link" size="small"
                      @click="handleDelete(record)">删除
            </a-button>
          </template>
        </template>
      </a-table>
    </div>
    <a-modal v-model:visible="open" title="新增" width="60%" @ok="handleAddSubmit">
      <a-form ref="formRef" style="margin-top: 24px" :model="formState" name="basic"
              :label-col="{ span: 5 }" :wrapper-col="{ span: 17 }" autocomplete="off">
        <a-form-item label="字段名称" name="itemValue"
                     :rules="[ { required: true, message: 'Please input your itemValue!' }, ]">
          <a-input readOnly onfocus="this.removeAttribute('readonly');"
                   onblur="this.setAttribute('readonly',true);"
                   v-model:value="formState.itemValue"/>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {ref, unref, computed, onMounted, reactive, watch, nextTick} from 'vue';
import type {FormInstance} from 'ant-design-vue';
import {message} from 'ant-design-vue';
import type {addUserBo} from '#/api/common';
import {
  pageUserApi,
  addUserApi, delUserApi
} from '#/api';

import {useAccessStore} from '@vben/stores';
import {SearchOutlined} from "@ant-design/icons-vue";

const accessStore = useAccessStore();

const loading = ref(false);
const open = ref(false);
const formRef = ref<FormInstance>();
const keyword = ref<string>('');

const dataSource = ref<AssetPageVo[]>([]);

const pagination = ref({
  total: 0,
  current: 1,
  pageSize: 10,
  size: '',
  showSizeChanger: false,
  showQuickJumper: false,
});
const pageParam = computed(() => ({
  query: {},
  current: pagination.value?.current,
  size: pagination.value?.pageSize,
}));
let formState = reactive<addUserBo>({
  userName: '',
  realName: '',
  userTel: '',
  password: ''
});

const columns = [
  {
    title: '用户账号',
    dataIndex: 'userName',
    key: 'userName',
    width: 200,
    align: 'center',
  },
  {
    title: '用户昵称',
    dataIndex: 'realName',
    key: 'realName',
    align: 'center',
  },
  {
    title: '联系方式',
    dataIndex: 'userTel',
    key: 'userTel',
    align: 'center',
  },
  {
    title: '最近登录时间',
    dataIndex: 'lastLoginTime',
    key: 'lastLoginTime',
    align: 'center',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation',
    width: 250,
    align: 'center',
  },
];

onMounted(() => {
  list();
});

// watch(dateValue, (newValue, oldValue) => {
//   console.log(`新值: ${newValue}, 旧值: ${oldValue}`);
// });

const reload = () => {
  pagination.value.current = 1
  list()
}

const pageChange = (page) => {
  pagination.value.current = page.current
  list()
}

const handleAdd = () => {

  open.value = true
  nextTick(() => {
    formRef.value?.resetFields()
  })
}
const handleAddSubmit = () => {
  const _this = this;
  formRef.value
    ?.validateFields()
    .then(() => {
      addUserApi(formState).then(() => {
        message.success('新增成功');
        reload();
        open.value = false;
      });
    })
    .catch((e) => {
      console.log('表单错误', e);
      message.error('表单填写错误');
    });
};

async function list() {
  loading.value = true;
  const res = await pageUserApi(unref(pageParam)).finally(()=>{loading.value = false});
  dataSource.value = res.records;
}
const handleDelete = async (record) =>{
  loading.value = true
  await delUserApi({id:record.id}).finally(()=>{loading.value = false})
  message.success("删除成功")
  reload()
}

</script>
<style lang="less">
.basic-wrap {
  margin: 0 16px;
}

.button-wrap {
  margin: 16px 0;
  display: flex;
}
.right-button-wrap{
  margin-left: auto;
}
</style>
